본문으로 건너뛰기

올바른 초기값 설정과 불필요한 상태 제거

올바른 초기값 설정​

React에서 상태(state)를 사용하면 컴포넌트가 동적으로 변할 수 있는 데이터를 관리할 수 있습니다. 상태를 올바르게 설정하는 것은 매우 중요합니다. 초기값을 적절하게 설정하지 않으면, 이후에 불필요한 상태 업데이트나 에러가 발생할 수 있습니다.

상태 초기값 설정 예시​

다음은 간단한 입력 폼 예시입니다. 입력 필드의 상태를 관리하기 위해 초기값을 설정하는 방법을 보여줍니다.

import React, { useState } from 'react';

function MyForm() {
  // 초기값 설정
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleAgeChange = (event) => {
    setAge(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`Name: ${name}, Age: ${age}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <br />
      <label>
        Age:
        <input type="number" value={age} onChange={handleAgeChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

위 코드에서 useState 훅을 사용해 name과 age 상태의 초기값을 각각 빈 문자열과 0으로 설정했습니다. 이는 입력 필드가 처음 렌더링될 때 초기 상태를 설정해 주는 중요한 단계입니다.

불필요한 상태 제거​

상태는 컴포넌트의 렌더링과 성능에 큰 영향을 미칠 수 있습니다. 따라서 상태로 관리할 필요가 없는 값은 상태로 관리하지 않는 것이 좋습니다. 불필요한 상태를 제거하면 코드가 더 간결해지고, 성능이 향상될 수 있습니다.

불필요한 상태 제거 예시​

예를 들어, 다음과 같이 필터링된 리스트를 상태로 관리하는 것은 불필요합니다. 필터링된 리스트는 상태로 관리할 필요 없이 필요한 시점에 계산하여 사용할 수 있습니다.

import React, { useState } from 'react';

function FilteredList() {
  const [query, setQuery] = useState('');
  const items = ['Apple', 'Banana', 'Orange', 'Mango'];

  // 필터링된 리스트는 상태로 관리하지 않고 함수 내에서 계산
  const filteredItems = items.filter(item => item.toLowerCase().includes(query.toLowerCase()));

  const handleQueryChange = (event) => {
    setQuery(event.target.value);
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleQueryChange} placeholder="Search..." />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default FilteredList;

위 코드에서 filteredItems는 상태로 관리되지 않고, query 상태가 변경될 때마다 리스트를 필터링하여 렌더링합니다. 이렇게 하면 불필요한 상태를 줄일 수 있습니다.

더 알아보기​

  • 상태 관리: 상태(state)란 무엇이고, 어떻게 효율적으로 관리할 수 있는지 알아봅시다.
  • React 훅(Hook): useState, useEffect 등 다양한 훅의 사용법과 역할을 이해해봅시다.
  • 렌더링 최적화: 상태 관리가 어떻게 렌더링에 영향을 미치고, 이를 최적화하는 방법을 살펴봅시다.

내용 요약과 다음 주제​

오늘은 React에서 올바른 상태 초기값 설정 방법과 불필요한 상태를 제거하는 방법에 대해 배웠습니다. 상태를 적절하게 설정하고, 불필요한 상태를 줄이면 코드의 가독성과 성능이 향상됩니다. 다음 주제인 업데이트되지 않는 값의 문제점 확인과 해결에서는 상태가 업데이트되지 않는 문제를 어떻게 확인하고 해결할 수 있는지에 대해 알아보겠습니다.